import { getRateDetail } from '@/servers/api/order';
import { toImages } from '@/utils';
import { FormattedMessage, history, useIntl, useLocation } from '@umijs/max';
import {
    Avatar,
    Button,
    Descriptions,
    Image,
    Rate,
    Space,
    Spin,
    Tooltip,
    Typography,
} from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
type IParams = {
    type: string;
    order_id: number;
};
const Takepart: React.FC = () => {
    const location = useLocation();
    const state = location.state as IParams;
    const intl = useIntl();
    const { Text } = Typography;
    const [loading, setLoading] = useState(false);
    const [order_info, setorder_info] = useState();
    const [star, setStar] = useState([]);
    const [star2, setStar2] = useState([]);
    const [res1, setres1] = useState({});
    const [res2, setres2] = useState({});
    function getRateDetailFun() {
        getRateDetail({
            order_id: state.order_id,
            type: state.type,
        }).then((res) => {
            console.log(res);
            setLoading(false);
            setorder_info(res.data);
            const order_info = res.data.filter((item) => item.type === '1')[0];
            const order_info2 = res.data.filter((item) => item.type === '2')[0];
            if (order_info) {
                setres1(order_info);
                setStar([
                    order_info.service_score,
                    order_info.product_score,
                    order_info.pay_speed_score,
                    order_info.goods_speed_score,
                    order_info.integrity_score,
                ]);
            }
            if (order_info2) {
                setres2(order_info2);
                setStar2([
                    order_info2.service_score,
                    order_info2.product_score,
                    order_info2.pay_speed_score,
                    order_info2.goods_speed_score,
                    order_info2.integrity_score,
                ]);
            }
        });
    }
    useEffect(() => {
        setLoading(true);
        getRateDetailFun();
    }, []);
    return (
        <Spin spinning={loading}>
            {!!res1 && Object.keys(res1).length > 0 && (
                <Descriptions>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '姓名' })}
                    >
                        <Space>
                            <Avatar
                                src={
                                    <img
                                        src={toImages(res1.from_user?.avatar)}
                                        alt="avatar"
                                    />
                                }
                            />
                            {res1.from_user?.username}
                        </Space>
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '图标认证' })}
                    >
                        <Avatar.Group shape="square">
                            {res1.from_user?.label.map((item) => (
                                <Tooltip
                                    title={item.name}
                                    placement="top"
                                    key={item.id}
                                >
                                    <Avatar
                                        src={<img src={toImages(item.url)} />}
                                    />
                                </Tooltip>
                            ))}
                        </Avatar.Group>
                    </Descriptions.Item>
                    <Descriptions.Item>
                        <Text type="success">
                            <FormattedMessage id="发布方评价"></FormattedMessage>
                        </Text>
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '评论时间' })}
                    >
                        {dayjs(res1.createtime * 1000).format(
                            'YYYY-MM-DD HH:mm:ss',
                        )}
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '内容' })}
                    >
                        {res1[intl.formatMessage({ id: 'item.content' })]}
                    </Descriptions.Item>
                    <Descriptions.Item>
                        <Image.PreviewGroup>
                            {res1.images.map((item) => (
                                <Image
                                    key={item}
                                    width={100}
                                    height={80}
                                    src={toImages(item)}
                                />
                            ))}
                        </Image.PreviewGroup>
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '订单编号' })}
                    >
                        {res1.order_no}
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '订单信息' })}
                    >
                        {res1[intl.formatMessage({ id: 'item.show_text' })]}
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '综合评价' })}
                    >
                        <Rate disabled defaultValue={res1.total_score} />
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '服务态度' })}
                    >
                        <Rate disabled defaultValue={res1.service_score} />
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '产品质量' })}
                    >
                        <Rate disabled defaultValue={res1.product_score} />
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '产品价格' })}
                    >
                        <Rate disabled defaultValue={res1.pay_speed_score} />
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '发货速度' })}
                    >
                        <Rate disabled defaultValue={res1.goods_speed_score} />
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '诚信度' })}
                    >
                        <Rate disabled defaultValue={res1.integrity_score} />
                    </Descriptions.Item>
                </Descriptions>
            )}
            {!!res2 && Object.keys(res2).length > 0 && (
                <Descriptions>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '姓名' })}
                    >
                        <Space>
                            <Avatar
                                src={
                                    <img
                                        src={toImages(res2.from_user?.avatar)}
                                        alt="avatar"
                                    />
                                }
                            />
                            {res2.from_user?.username}
                        </Space>
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '图标认证' })}
                    >
                        <Avatar.Group shape="square">
                            {res2.from_user?.label.map((item) => (
                                <Tooltip
                                    title={item.name}
                                    placement="top"
                                    key={item.id}
                                >
                                    <Avatar
                                        src={<img src={toImages(item.url)} />}
                                    />
                                </Tooltip>
                            ))}
                        </Avatar.Group>
                    </Descriptions.Item>
                    <Descriptions.Item>
                        <Text type="success">
                            <FormattedMessage id="参与方评价"></FormattedMessage>
                        </Text>
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '评论时间' })}
                    >
                        {dayjs(res2.createtime * 1000).format(
                            'YYYY-MM-DD HH:mm:ss',
                        )}
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '内容' })}
                    >
                        {res2[intl.formatMessage({ id: 'item.content' })]}
                    </Descriptions.Item>
                    <Descriptions.Item>
                        <Image.PreviewGroup>
                            {res2.images.map((item) => (
                                <Image
                                    key={item}
                                    width={100}
                                    height={80}
                                    src={toImages(item)}
                                />
                            ))}
                        </Image.PreviewGroup>
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '订单编号' })}
                    >
                        {res2.order_no}
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '订单信息' })}
                    >
                        {res2[intl.formatMessage({ id: 'item.show_text' })]}
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '综合评价' })}
                    >
                        <Rate disabled defaultValue={res2.total_score} />
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '服务态度' })}
                    >
                        <Rate disabled defaultValue={res2.service_score} />
                    </Descriptions.Item>
                    <Descriptions.Item
                        label={intl.formatMessage({ id: '诚信度' })}
                    >
                        <Rate disabled defaultValue={res2.integrity_score} />
                    </Descriptions.Item>
                </Descriptions>
            )}
            <div style={{textAlign:"right"}}>
                <Button onClick={()=>{history.back()}}><FormattedMessage id="返回"></FormattedMessage></Button>
            </div>
        </Spin>
    );
};
export default Takepart;
